<template>
	<view class="c_container">
		<view class="c_header"></view>
		<view>
			<view class="in_boxs">
				<tabRaduis :tabs="tabs" :active="activeIndex" @change="changeTab"></tabRaduis>
				<view class="cl_box" v-if="activeIndex == 0">
					<view v-if="geList.length > 0">
						<view class="carList" v-for="(ite, ind) in geList" :key="ind">
							<view class="input_box" v-for="(item, index) in ite.studentCards" style="margin-bottom: 0;" :key="index">
								<view class="title_box">
									<text class='in_txts'>{{item.orgName}}</text>
									<text class='stute_icon' v-if="item.cardState!=0">{{item.cardStateDesc}}</text>
								</view>
								<view class="in_top">
									<text class='in_txt'>姓名：{{item.empName}}</text>
									<text class='in_txt'>卡号：{{item.cardNo}}</text>
								</view>
								<view class="in_footer" v-if="item.cardState==0">
									<view class="in-box" v-for="(items, indexs) in item.wallets" :key="indexs" v-if="items.walletType != 2">
										<text class='btn_txt' @click="jumpWallet(item, items)">{{items.walletType == 1 ? '现金钱包' : items.walletType == 3 ? '热水钱包' : items.walletType == 2 ? '补助钱包' : ''}}</text><!-- items.walletName -->
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-if="geList.length == 0">
						<noContent></noContent>
					</view>
				</view>
				<view class="cl_box" v-if="activeIndex == 1">
					<view v-if="qingList.length > 0">
						<view class="carList" v-for="(ite, ind) in qingList" :key="ind">
							<view class="input_box" v-for="(item, index) in ite.studentCards" :key="index">
								<text class='in_txts'>{{item.orgName}}</text>
								<view class="in_top">
									<text class='in_txt'>姓名：{{item.empName}}</text>
									<text class='in_txt'>卡号：{{item.cardNo}}</text>
								</view>
								<view class="in_footer" v-if="item.cardState==0">
									<view class="in-box" v-for="(items, indexs) in item.wallets" :key="indexs" v-if="items.walletType != 2">
										<text class='btn_txt' @click="jumpWallet(item, items)">{{items.walletType == 1 ? '现金钱包' : items.walletType == 3 ? '热水钱包' : items.walletType == 2 ? '补助钱包' : ''}}</text><!-- items.walletName -->
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-if="qingList.length == 0">
						<noContent></noContent>
					</view>
				</view>
				<view v-if="activeIndex == 2">
					<view class="dai_box">
						<view class="li_box">
							<text class="lisi" @click="lishiCZ">查看充值历史</text>
						</view>
						<view class="dai_content">
							<view class="input_box">
								<!-- <view class="in_box">
									<text class="orgTxt">请选择<text></text></text>
									<view style="display: flex;flex: 1;flex-direction: row;justify-content: space-around;align-items: center;">
										<picker class="selectBox" mode="selector" range-key="cityName" :value="shengIndex" :range="shengList" @change="bindshengSelectChange">
											<view class="selectBox selectTxt">{{defaultShengName}}</view>
										</picker>
										<picker class="selectBox" mode="selector" range-key="cityName" :value="shiIndex" :range="shiList" @change="bindshiSelectChange">
											<view class="selectTxt">{{defaultShiName}}<image class="down_icon" src="/static/images/down.png" mode="scaleToFill"></image></view>
										</picker>
										<picker class="selectBox" mode="selector" range-key="cityName" :value="xianIndex" :range="xainList" @change="bindxianSelectChange">
											<view class="selectTxt">{{defaultXianName}}<image class="down_icon" src="/static/images/down.png" mode="scaleToFill"></image></view>
										</picker>
									</view>
								</view> -->
								<view class="in_box" @click="showOrg = !bindType">
									<text class="orgTxt">机构</text>
									<input style="flex: 1;" v-model="orgName" :disabled="true" type="text" placeholder-class="account-txt" class="uni-input" placeholder="请输入机构名称" />
								</view>
								<view class="in_box">
									<text class="orgTxt">卡号</text>
									<input type="text" style="flex: 1;" v-model="cardNo" @blur="carNoLen" placeholder-class="account-txt" class="uni-input" placeholder="请输入个人卡号(校园卡/机关饭卡等)" />
								</view>
								<view class="in_box">
									<text class="orgTxt">类型</text>
									<picker style="width: 88%;position: relative;" mode="selector" :value="jobIndex" :range="jobList" @change="bindjobListSelectChange">
										<view class="uni-input account-txt">{{getjobListName(jobIndex)}}</view>
									</picker>
									<image src="/static/images/down.png" style="position: absolute;right: 40rpx; width: 56rpx; height: 56rpx;"></image>
								</view>
							</view>
						</view>
						<view class="boxsss" v-if="showBox">
							<view class="modal_boxs">
								<view class="m_box">
									<text>卡充值记录</text>
								</view>
								<view style="width: 90%;">
									<view class="box_head">
										<text class="txt_layout">机构</text>
										<text class="txt_layout">卡号</text>
										<text class="txt_layout">快速充值</text>
									</view>
									<view class="box_body" v-for="(item, ind) in stuList" v-if="stuList.length != 0" :key="ind">
										<text class="txt_layout" style="font-size: 24rpx;">{{item.orgName}}</text>
										<text class="txt_layout" style="font-size: 24rpx;">{{item.cardNo}}</text>
										<view class="txt_layout">
											<text class="toPay" @click="toCZ(item)">去充值</text>
										</view>
									</view>
									<view v-if="stuList.length == 0" class="less_box">
										<text>暂无历史记录</text>
									</view>
								</view>
								<view class="payBtn">
									<text class="lisis" @click="cancelFlag">关闭</text>
								</view>
							</view>
						</view>
						<view class="btns">
							<button type="primary" class="btn_pri" style="background-color: #477EDA;" @click="queren">确认</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<popup-org title="选择机构" v-model="showOrg" :parentId="parentId" @change="cliName"></popup-org>
		<tmcModal :isShow="showMcModal1" :showCancel="false" :content="content1" :title="title1" @cancel="cancel" @ok='ok'></tmcModal>
	</view>
</template>

<script>
	import {queryStudentCard, queryOrg, findEmpCard, getRechargeEmp,findBaseArea,getHistoryRecharge,getAccessToken} from '../../common/api/index.js';
	import {_showLoading, _showToast} from '../../common/js/util.js'
	import {ali_mini_appid} from '../../common/utils/pay_center.js'
	import tabRaduis from '../../components/custom-tabs-radius/custom-tabs-radius.vue'
	import popupOrg from '../../components/custom-popup-org/custom-popup-org.vue'
	import noContent from '../../components/no-content.vue'
	import tmcModal from '../../components/custom-modal/mc-modal.vue'
	export default {
		created(){
			this._queryStudentCard()
			// this._shiList()
		},
		computed: {
			getjobListName(index) {
				return function(index) {
					return this.jobList[index]
				}
			},
		},
		components: {
			tabRaduis,
			noContent,
			popupOrg,
			tmcModal
		},
		data() {
			return {
				jobList: ['请选择充值类型', '食堂钱包'],
				jobIndex: 0,
				showBox: false,
				cardNo: '',
				orgId: '',
				orgName: '',
				tabs:[{
					activeIndex: 0,
					title: '个人充值'
				},{
					activeIndex: 1,
					title: '亲友充值'
				},{
					activeIndex: 2,
					title: '代他人充值'
				}],
				activeIndex: 0,
				stuList: [],
				geList: [],
				qingList: [],
				parentId: '',
				showOrg: false,
				showMcModal1: false,
				content1: '',
				title1: '',
				bindType: null
			}
		},
		onLoad(option){
			if(option.bindType) {
				this.orgName = '申能达自营售奶'
				this.orgId = '4501505'
				this.bindType = option.bindType
			}
		},
		methods: {
			cancel() {
				this.showMcModal1 = false
			},
			ok() {
				this.showMcModal1 = false
			},
			changeTab(obj) {
				this.activeIndex = obj.activeIndex
			},
			cancelFlag() {
				this.showBox = false;
			},
			pad(num, n) {
			  var len = num.length;
			  while(len < n) {
			    num = "0" + num;
			    len++;
			  }
			  this.cardNo = num;
			  return num;
			},
			carNoLen() {
				if(this.cardNo.length == 0) {
					return
				} else if(this.cardNo.length < 8) {
					_showToast('卡号不足8位系统将自动补足')
					this.pad(this.cardNo, 8)
				}
			},
			cancelFlag() {
				this.showBox = false;
			},
			toCZ(item) {
				this.orgId = item.orgId
				this.cardNo = item.cardNo
				this.showBox = false
			},
			bindjobListSelectChange: function(e) {
				this.jobIndex = e.target.value
				this.jobName = this.jobList[e.target.value]
			},
			queren() {
				if(this.jobIndex == 0) {
					_showToast('请先选择充值类型')
				} else {
					findEmpCard({
						orgId: this.orgId,
						cardNo: this.cardNo,
						walletType: this.jobList[this.jobIndex] == '热水钱包' ? 3 : 1
					}).then(res => {
						if(res.code == 0) {
							uni.navigateTo({
								url: '/pagePayment/recharge/binReshui?objParams=' + encodeURIComponent(JSON.stringify({...res.data, walletType: (this.jobList[this.jobIndex] == '热水钱包' ? 3 : 1)}))
							})
						} else {
							uni.showToast({
								title: `${res.msg}`,
								icon: 'none'
							})
						}
					}).catch(err => {
						console.log(err)
					})
				}
			},
			cliName(obj) {
				this.orgId = obj.orgId;
				this.orgName = obj.orgName;
			},
			jumpWallet(item, obj) {
				if(obj.walletType == 2) {
					_showToast('不支持补助钱包充值')
				} else {
					uni.navigateTo({
						url: '/pagePayment/recharge/bindRecharge?objParams=' + encodeURIComponent(JSON.stringify(obj)) + '&stuObj=' + encodeURIComponent(JSON.stringify(item))
					})
				}
			},
			lishiCZ() {
				let _this = this;
				_showLoading('加载中,请稍后…')
				let openId = uni.getStorageSync('str2')
				// #ifdef MP-ALIPAY
				uni.login({
					provider: 'alipay',
					success:function(response){
						if(response.errMsg == "login:ok") {
							_showLoading('加载中,请稍后…')
							getAccessToken({
								code: response.code,
								appId: ali_mini_appid
							}).then(res => {
								if(res.code == 0) {
									getRechargeEmp({
										openId: res.data.aliUserId
									}).then(ress => {
										if(ress.code == 0) {
											_this.stuList = ress.data
											uni.hideLoading()
											_this.showBox = true
										} else {
											uni.hideLoading()
											_this.title1 = '登录失败'
											_this.content1 = ress.msg
											_this.showMcModal1 = true
										}
									}).catch(err => {
										console.log(err)
									})
								} else {
									uni.hideLoading()
									_this.title1 = '温馨提示'
									_this.content1 = res.msg
									_this.showMcModal1 = true
								}
							}).catch(err => {
								uni.hideLoading()
								console.log(err)
							})
						}
					},
					complete:function(){
						// uni.hideLoading();
					}
				})
				// #endif
				// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					success:function(response){
						if(response.errMsg == "login:ok") {
							_showLoading('加载中,请稍后…')
							getRechargeEmp({
								code: response.code
							}).then(res => {
								if(res.code == 0) {
									_this.stuList = res.data
									uni.hideLoading()
									_this.showBox = true
								} else {
									uni.hideLoading()
									this.title1 = '登录失败'
									this.content1 = res.resultMsg
									this.showMcModal1 = true
								}
							}).catch(err => {
								console.log(err)
							})
						}
					},
					complete:function(){
						uni.hideLoading();
					}
				})
				// #endif
				// #ifdef APP-PLUS
				let s_userId = uni.getStorageSync('s_userId')
				getHistoryRecharge({
					userId: s_userId
				}).then(res => {
					if(res.code == 0) {
						_this.stuList = res.data
						uni.hideLoading()
						_this.showBox = true
					} else {
						uni.hideLoading()
						this.title1 = '登录失败'
						this.content1 = res.resultMsg
						this.showMcModal1 = true
					}
				}).catch(err => {
					console.log(err)
				})
				// #endif
				// #ifdef H5
				_showLoading('加载中,请稍后…')
				getRechargeEmp({
					code: '',
					openId: openId
				}).then(res => {
					if(res.code == 0) {
						_this.stuList = res.data
						uni.hideLoading()
						_this.showBox = true
						_this.counLen = 1
					} else {
						uni.showLoading()
					}
				}).catch(err => {
					uni.showLoading()
					console.log(err);
				})
				// #endif
			},
			_queryStudentCard() {
				_showLoading('加载中,请稍后…')
				let s_userId = uni.getStorageSync('s_userId')
				queryStudentCard({
					userId: s_userId,
					bindType: this.bindType
				}).then(res => {
					if(res.code == 0) {
						this.stuList = res.data
						if (this.bindType) {
							this.geList = res.data.filter(item => item.bindType == 3)
							this.qingList = res.data.filter(item => item.bindType == 1)
							this.qingList.forEach(items => {
								items.studentCards = items.studentCards.filter(item => item.orgId == 4501505)
								return items
							})
							console.log(this.qingList)
						}else {
							this.geList = res.data.filter(item => item.bindType == 0)
							this.qingList = res.data.filter(item => item.bindType == 1)
						}
						uni.hideLoading()
					} else {
						uni.hideLoading()
					}
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F8F8F8;
	}
	.c_container {
		height: 100%;
		background: #F8F8F8;
		.c_header {
			width: 100vw;
			height: 390rpx;
			background-image: url('');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			display: flex;
			justify-content: center;
		}
		.in_boxs {
			width: 100%;
			display: flex;
			flex: 1;
			flex-direction: column;
			position: absolute;
			top: 310rpx;
			left: 0rpx;
			background: #F8F8F8;
			.cl_box {
				display: flex;
				flex: 1;
				background-color: #F8F8F8;
				flex-direction: column;
				.carList {
					display: flex;
					flex-direction: column;
					background: #FFFFFF;
					box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.08);
					border-radius: 8rpx;
					width: 90%;
					margin-left: 5%;
					margin-top: 20rpx;
					.in_txts {
						font-size: 32rpx;
						font-family: "PingFangSC-Semibold, PingFang SC";
						font-weight: 600;
						color: #3C424F;
					}
					.in_top {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 20rpx;
						.in_txt {
							font-size: 28rpx;
							font-family: "PingFangSC-Medium, PingFang SC";
							font-weight: 500;
							color: #6B707A;
							line-height: 60rpx;
						}
					}
					.in_footer {
						display: flex;
						flex-direction: row;
						justify-content: space-around;
						align-items: center;
						.in-box {
							display: flex;
							flex: 1;
							justify-content: center;
							align-items: center;
							.btn_txt {
								background: #185AFF;
								border-radius: 8rpx;
								padding: 10rpx 30rpx;
								font-size: 24rpx;
								font-family: "PingFang-SC-Medium, PingFang-SC";
								font-weight: 500;
								color: #FFFFFF;
							}
						}
					}
				}
			}
			.dai_box {
				padding: 20rpx;
				.li_box {
					.lisi {
						float: right;
						background: #FFFFFF;
						border-radius: 26rpx;
						border: 1px solid #185AFF;
						font-size: 28rpx;
						font-family: "PingFang-SC-Medium, PingFang-SC";
						font-weight: 500;
						color: #185AFF;
						padding: 8rpx 26rpx;
						margin-right: 30rpx;
						margin-top: 15rpx;
					}
				}
				.dai_content {
					margin-top: 70rpx;
				}
				.boxsss {
					width: calc(100% - 40rpx);
					height: 100%;
					display: block;
					position: fixed;
					top: 0rpx;
					left: 0rpx;
					background-color: rgba(102, 102, 102, 0.498039215686275);
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 0 20rpx;
					z-index: 99;
					.modal_boxs {
						width: 600rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						background-color: rgba(252, 252, 252, 1);
						border-radius: 10rpx;
						padding-bottom: 35rpx;
						position: relative;
						.m_box {
							padding: 40rpx 20rpx;
							display: flex;
							justify-content: center;
							align-items: center;
						}
						.box_head {
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							align-items: center;
							border-bottom: 1rpx solid rgba(221, 221, 221, 0.8);
							line-height: 60rpx;
							
						}
						.box_body {
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							align-items: center;
							border-bottom: 1rpx solid rgba(221, 221, 221, 0.8);
							line-height: 60rpx;
							.toPay {
								background: linear-gradient(90deg, #0685FF 0%, #285EFF 100%);
								border-radius: 10rpx;
								font-size: 24rpx;
								padding: 0 20rpx;
								color: #FFFFFF;
								display: inline;
								line-height: 40rpx;
							}
						}
						.less_box {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 100%;
							padding: 30rpx 0;
						}
						.payBtn {
							display: flex;
							flex-direction: row;
							justify-content: center;
							align-items: center;
							margin-top: 35rpx;
							.lisis {
								border-radius: 10rpx;
								float: right;
								width: 200rpx;
								height: 50rpx;
								text-align: center;
								line-height: 50rpx;
								color: #FFFFFF;
								box-shadow: rgba(25, 94, 215, 0.4) 0px 4px 6px 1px;font-size: 20rpx;
								background: linear-gradient(90deg, #0685FF 0%, #285EFF 100%);
							}
						}
					}
				}
				.btns {
					display: flex;
					justify-content: center;
					align-items: center;
					padding-top: 80rpx;
					.btn_pri {
						width: 70%;
						height: 80rpx;
						text-align: center;
						line-height: 80rpx;
						font-size: 32rpx;
						font-family: "PingFangSC-Heavy, PingFang SC";
						font-weight: 600;
						color: #FFFFFF;
						background: linear-gradient(90deg, #0685FF 0%, #285EFF 100%);
						box-shadow: 0px 8px 16px 0px rgba(36, 98, 255, 0.24);
						border-radius: 8rpx;
					}
				}
			}
		}
	}
	.txt_layout {
		display: flex;
		flex: 1;
		justify-content: center;
		align-items: center;
	}
	.in_box {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 20rpx;
		height: 84rpx;
		margin-bottom: 20rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		border: 1px solid #E6E6E6;
	}
	.in_box:last-child {
		margin: 0;
	}
	.orgTxt {
		font-size: 30rpx;
		font-family: "PingFangSC-Medium, PingFang SC";
		font-weight: 500;
		color: #6B707A;
		margin-right: 14rpx;
		width: 100rpx;
		text-align: justify;
		height: 40rpx;
	}
	.input_box {
		padding: 30rpx;
		position: relative;
	}
	.title_box{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.stute_icon{
		font-size: 28rpx;
		color: #999;
		padding: 4rpx 24rpx;
		border: 1rpx solid #999;
		border-radius: 28rpx
	}
	.input_box:last-child {
		margin-bottom: 0;
	}
	.account-txt {
		font-size: 28rpx;
		font-family: "PingFangSC-Medium, PingFang SC";
		font-weight: 500;
		color: #ADADAD;
	}
	.uni-input {
		padding: 0;
	}
	.selectBox {
		display: flex;
		// flex: 1;
		justify-content: center;
		align-items: center;
	}
	.selectBox:last-child {
		margin-right: 0;
	}
	.orgTxt text {
		display: inline-block;
		width:100%;
		height: 0;
	}
	.selectTxt {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		font-family: "PingFangSC-Medium, PingFang SC";
		font-weight: 500;
		color: #6B707A;
		// margin-right: 14rpx;
	}
	.down_icon{
		width: 48rpx;
		height: 48rpx;
	}
</style>
